{extend name="user/index" /}

{block name="title"}
<title>[ Score List ]</title>
{/block}

{block name="css"}
{css href="_CSS_score.css"}
{/block}

{block name="main"}
<div class="container mt40">
    <div class="row">
        <h1 style="font-size:35px">
            <i class="icon icon-line-chart icon-3x"></i>
            积分列表
            <small>Score List</small>
        </h1>
        <div class="col-md-4 col-md-offset-8">
            <form class="form-inline" action="{:url('index/user/index')}" method="get">
                <div class="form-group">
                    <input type="text" name="name" value="{:input('get.name')}" class="form-control text-center"
                           placeholder="搜索 | Search Name">
                    <button type="submit" id="searchBtn" class="btn btn-info" data-toggle="tooltip" data-placement="top"
                            title="搜索查询">
                        <i class="icon icon-search"></i>
                    </button>
                    <a href="{:url('index/score/add')}" class="btn btn-primary" data-toggle="tooltip" data-placement="top"
                       title="新增扣分">
                        <i class="icon icon-plus"></i>
                    </a>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="table-responsive">
            <table class="table table-hover table-striped mt30">
                <thead>
                <tr>
                    <th class="text-center col-md-2"><i class="icon icon-chat"></i> 扣分时间</th>
                    <th class="text-center col-md-1"><i class="icon icon-tags"></i> 现在班期</th>
                    <th class="text-left col-md-2"><i class="icon icon-keyboard"></i> 学员姓名</th>
                    <th class="text-center col-md-1"><i class="icon icon-chat"></i> 扣分</th>
                    <th class="text-center col-md-1"><i class="icon icon-tags"></i> 罚金</th>
                    <th class="text-right col-md-3"><i class="icon icon-bookmark"></i> 原因</th>
                    <th class="text-center"><i class="icon icon-bookmark"></i> 操作人</th>
                    <th class="text-center col-md-2"><i class="icon icon-refresh"></i> 编辑</th>
                </tr>
                </thead>

                <tbody style="font-size:19px">
                {if condition="empty($data)"}
                <tr class="text-center">
                    <td colspan="8" class="danger">[ 查 无 数 据 ]</td>
                </tr>
                {else /}
                {foreach $data as $v}
                <tr class="text-center">
                    <td>{$v['ctime']}</td>
                    <td class="success">{$v['uclass']}</td>
                    <td class="success text-left"><a href="{:url('index/user/name',['name'=>$v['uname']])}">{$v['uname']}</a></td>
                    <td class="warning">- {$v['score']} 分</td>
                    <td class="warning text-right">{$v['fine']}元</td>
                    <td class="warning text-right">
                        {if condition="empty($v['info'])"}
                        未填写
                        {else/}
                        {$v['info']}
                        {/if}
                    </td>
                    <td>{$v['aname']}</td>
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-info editBtn" data-id="{$v['id']}"
                                    data-toggle="tooltip" data-placement="top" title="编辑扣分记录">
                                <i class="icon icon-wrench"></i>
                            </button>
                            <button type="button" class="btn btn-primary delBtn" data-id="{$v['id']}"
                                    data-toggle="tooltip" data-placement="top" title="删除记录">
                                <i class="icon icon-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {/foreach}
                {/if}
                </tbody>
            </table>
        </div>
    </div>

    <hr>
    <div class="col-md-12 text-center">
        <address>
            <a href="http://www.itxdl.cn" target="_blank" style="color:#333">Copyright&nbsp;<span class="glyphicon glyphicon-copyright-mark"></span>
                &nbsp;2015&nbsp;&nbsp;• itxdl.cn</a> 丨
            <a href="http://weibo.com/sosdust" target="_blank" style="color:#333"> 探索者丶枫 [ 讲师.黄超 ]</a>
        </address>
    </div>
</div>


<div class="modal fade" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                        class="sr-only">关闭</span></button>
                <h1 class="modal-title text-center">修改 [ <b class="text-danger">XXX</b> ] 的扣分信息</h1>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="scoreForm">
                    <input type="hidden" name="id">

                    <div class="form-group">
                        <label for="info" class="col-md-2 col-md-offset-1 control-label">扣分原因: </label>
                        <div class="col-md-8">
                            <input type="text" id="info" name="info" class="form-control text-center"
                                   placeholder="手动输入扣分说明">
                            <span id="helpBlock" class="help-block">修改时不提供选项，请手动填写理由</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="input-control has-label-left has-label-right">
                                <input type="number" name="score" class="form-control text-center" max="100"
                                       min="0">
                                <label class="input-control-label-left">扣分:</label>
                                <label class="input-control-label-right text-right text-danger">0~100分</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="input-control has-label-left has-label-right">
                                <input type="number" name="fine" value="0"
                                       class="form-control text-center" max="100" min="0">
                                <label class="input-control-label-left">罚款:</label>
                                <label class="input-control-label-right text-right text-danger">0~100元</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="input-control has-label-left has-label-right">
                                <input type="date" name="ctime"
                                       class="form-control text-center">
                                <label class="input-control-label-left">发生:</label>
                                <label class="input-control-label-right text-right text-danger">日期</label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    $('[data-toggle="tooltip"]').tooltip();

    $('.editBtn').on('click', function () {
        let id = $(this).attr('data-id');
        let name = $(this).parents('tr').children().get(2).innerText;
        $('#editModal form [name="id"]').val(id);
        $('#editModal .modal-title b').html(name);

        $.ajax({
            method: 'get',
            url: '/score/row/' + id,
            dataType: 'json',
            success: function (data) {
                if (data.code === 200) {
                    let row = data.row;
                    $('#scoreForm [name="info"]').val(row.info);
                    $('#scoreForm [name="score"]').val(row.score);
                    $('#scoreForm [name="fine"]').val(row.fine);
                    $('#scoreForm [name="ctime"]').val(row.ctime);
                    $('#editModal').modal({
                        backdrop: 'static',
                        keyboard: false,
                        position: 'fit',
                        moveable: 'inside'
                    });
                } else {
                    new $.zui.Messager(data.row, {
                        time: 3000,
                        placement: 'center',
                        type: 'danger'
                    }).show();
                }
            },
            error: function () {
                alert('操作失败，请重试！');
            }
        });
    });

    $('#saveBtn').on('click', function () {
        let id = $('#editModal form [name="id"]').val();
        let data = $('#scoreForm').serialize();

        $.ajax({
            method: 'put',
            url: '/score/' + id,
            data: data,
            dataType: 'json',
            success: function (data) {
                let msg = data.msg + '（code: ' + data.code + '）';
                new $.zui.Messager(msg, {
                    time: 8000,
                    placement: 'top-right',
                    type: data.status,
                    close: false
                }).show();

                $('#editModal').modal('hide', 'fit');
            },
            error: function () {
                alert('操作失败，请重试！');
            }
        });
    });

    $('.delBtn').on('click', function () {
        if (confirm('确定是要 [ 删除 ] 该积分记录吗?')) {
            let id = $(this).attr('data-id');
            let _this = $(this);
            $.ajax({
                method: 'delete',
                url: '/score/' + id,
                dataType: 'json',
                success: function (data) {
                    if (data.code === 200) {
                        _this.parents('tr').remove();
                    }
                    new $.zui.Messager(data.msg, {
                        time: 3000,
                        placement: 'top-right',
                        type: data.status,
                        close: false
                    }).show();
                },
                error: function () {
                    alert('操作失败，请重试！');
                }
            });
        }
    });

</script>
{/block}
